<template>
  <div style="display: flex; flex-direction: column; height: 100%">
    <SearchList>
      <SearchItem title="关键字搜索">
        <a-input placeholder="请输入合同编号、合同名称、合同签订主体" style="border: none" />
      </SearchItem>
      <SearchItem title="关键字搜索">
        <a-input placeholder="请输入合同编号、合同名称、合同签订主体" style="border: none" />
      </SearchItem>
      <SearchItem title="关键字搜索">
        <a-input placeholder="请输入合同编号、合同名称、合同签订主体" style="border: none" />
      </SearchItem>
      <SearchItem title="材料">
        <a-select
          :options="[
            { label: '钛合金', value: 1 },
            { label: '金刚石', value: 2 },
          ]"
          placeholder="请选择材料"
        />
      </SearchItem>
      <template #left>
        <StatusTab v-model:active="activeTab" :tabs="statusList" @change="changeTab" />
      </template>
      <template #actions>
        <ActionBar title="导入导出">
          <p @click="importVisible = true">
            导入质扣表
          </p>
          <p>导出excel</p>
        </ActionBar>
      </template>
    </SearchList>
    <BoliTabel ref="tableRef" :columns="columns" api="/admin/qualityDeduct/list" :params="tableParams">
      <template #status="{ text }">
        <MatchStatus :status="text" />
      </template>
      <template #action>
        <div>...</div>
      </template>
    </BoliTabel>
    <a-modal v-model:open="importVisible" title="导入合同台账" width="520px" :footer="null" destroy-on-close @cancel="closeImport">
      <ImportExcel :excel="excelParam" placeholder="选择合同台账计算月份" :select-month="true" @flush="flushTable" />
    </a-modal>
  </div>
</template>

<script setup>
import BoliTabel from '@/components/BoliTable/index.vue'
import ImportExcel from '@/components/ImportExcel/index.vue'
import MatchStatus from '@/components/MatchStatus/index.vue'
import StatusTab from '@/components/StatusTab/index.vue'
import { Modal } from 'ant-design-vue'
import { columns, excelParam, statusData } from './data'

defineOptions({
  name: 'DispatchDeduct',
})
// qualityDeduct

const tableParams = reactive({
  keywords: null,
  status: null,
})

const activeTab = ref(0)

const statusList = reactive([...statusData])

const importVisible = ref(false)
const popupVisible = ref(false)
const tableRef = ref(null) //

const refresh = reactive({ flush: false, failExcel: '' })

// 切换tab
function changeTab(item) {
  tableParams.status = item.query
}

function getStatusCount() {
  httpRequest('/admin/qualityDeduct/count', tableParams).then(res => {
    statusList[0].value = res.all
    statusList[1].value = res.pendingMatch
    statusList[2].value = res.matched
    statusList[3].value = res.completed
  })
}

function flushTable(excelUrl) {
  refresh.flush = true
  refresh.failExcel = excelUrl
}

function closeImport() {
  if (refresh.failExcel) {
    Modal.confirm({
      title: '失败数据下载提示',
      okText: '下载',
      content: '您有导入失败数据未下载，请点击下载',
      onOk() {
        window.location.href = refresh.failExcel
        return Promise.resolve()
      },
    })
  }
  if (refresh.flush) {
    getStatusCount()
    tableRef.value?.refresh()
  }
  refresh.flush = false
}

getStatusCount()
</script>

<style lang="less" scoped>
.status-list {
  display: flex;
  align-items: center;
  height: 100%;

  & > div {
    margin-right: 20px;
    font-size: 14px;
    color: #111;

    & span {
      margin-right: 5px;
    }
  }
}

.batch-btns {
  margin-right: 10px;

  .choose-btn {
    height: 30px;
    padding: 0 8px;
    font-size: 14px;
    line-height: 30px;
    color: #575757;
    cursor: pointer;
    background: #f2f5f7;
    border-radius: 4px;
  }
}
</style>
